<template>
	<view class="head_wrap">
		<view class="back" @click="closePop()"></view>
		<view class="head_item">
			<view class="title">设置头像和昵称</view>
			<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image v-if="avatarUrl == ''" :src="remoteUrl + 'recruit_head.png'" class="avatar_img"></image>
				<image v-else :src="avatarUrl" class="avatar_img"></image>
			</button>
			<view class="avatar_size">点击上传头像</view>
			<view class="nickname_item">
				<text class="nickname_title">设置昵称：</text>
				<input class="nickname" type="nickname" :value="nickname" @blur="bindblur" @input="bindinput"
					placeholder="请输入昵称" />
			</view>
			<view class="save_btn" @click="sendInfo()">确认授权</view>
		</view>
	</view>
</template>

<script>
	import { remoteUrl } from '@/utils/config.js' 
	export default {
		name: "login_pop",
		data() {
			return {
				remoteUrl: remoteUrl,
				avatarUrl: '',
				nickname: ''
			};
		},
		onLoad() {
		},
		methods: {
			onChooseAvatar(e) {
				let that = this
				this.avatarUrl = e.detail.avatarUrl
			},
			bindblur(e) {
				this.nickname = e.detail.value
			},
			bindinput(e) {
				this.nickname = e.detail.value
			},
			closePop() {
				this.$emit('closePop', false)
			},
			sendInfo() {
				if (this.avatarUrl == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				}
				if (this.nickname == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}
				let obj = {
					avatarUrl: this.avatarUrl,
					nickname: this.nickname
				}
				uni.switchTab({
					url: '/pages/index/index'
				})
				this.$emit('sendInfo',JSON.stringify(obj))
			},
		}
	}
</script>

<style lang="scss">
	.head_wrap {
		.back {
			width: 100vw;
			height: 100vh;
			background: rgba($color: #000000, $alpha: .6);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.head_item {
			width: 100vw;
			height: 600rpx;
			background: #fff;
			border-radius: 32rpx 32rpx 0 0;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10;
			text-align: center;

			.title {
				padding: 50rpx 0 20rpx 0;
				font-weight: bold;
			}

			.avatar {
				width: 220rpx;
				height: 160rpx;
				margin: 0 auto;
				background: #fff !important;
				.avatar_img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}
			}
			.avatar::after {
				border: none;
			}

			.avatar_size {
				margin-top: 10rpx;
				font-size: 26rpx;
			}

			.nickname_item {
				display: flex;
				align-items: center;
				width: 90%;
				margin: 20rpx auto;

				.nickname {
					width: 68%;
					border: 1rpx solid #ddd;
					border-radius: 8rpx;
					text-align: left;
					padding: 10rpx 0 10rpx 30rpx;
				}
			}

			.save_btn {
				width: 690rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				border-radius: 100rpx;
				margin: 50rpx auto 0;
				background: #28C445;
			}
		}
	}
</style>